import Regexps from '@/utils/reg';
import {redirectToLogin} from '@/utils/redirectToLoginPage'
import type {ProFormInstance} from '@ant-design/pro-components';
import {PageContainer, ProCard, ProForm, ProFormText} from '@ant-design/pro-components';
import {useRequest} from '@umijs/max';
import {Button, message} from 'antd';
import React, {useRef} from 'react';

import {changePassword} from '@/pages/organization/user-list/service'

type Password = {
    password: string;
    new_password: string;
    repeat_new_password?: string;
};

const ChangePwd: React.FC = () => {
    const formRef = useRef<ProFormInstance<Password>>();

    const {run: onFinish, loading} = useRequest(
        (params: Password) => {
            const {repeat_new_password, ...formData} = params;
            return changePassword(formData);
        },
        {
            manual: true,
            onSuccess: () => {
                message.success('修改成功');
                redirectToLogin();
            },
        },
    );

    return (
        <PageContainer>
            <ProCard>
                <div className="flex-center">
                    <ProForm<Password>
                        formRef={formRef}
                        autoFocusFirstInput
                        layout="horizontal"
                        submitter={false}
                        onFinish={onFinish}
                        labelCol={{style: {width: 100}}}
                        validateMessages={{required: '必填项不可为空'}}
                    >
                        <ProFormText.Password
                            width="md"
                            label="旧密码"
                            name="password"
                            placeholder="请输入旧密码"
                            rules={[{required: true}]}
                        />
                        <ProFormText.Password
                            width="md"
                            label="新密码"
                            name="new_password"
                            dependencies={['password']}
                            placeholder="请输入新密码"
                            validateTrigger={['onSubmit', 'onBlur']}
                            rules={[
                                {validateTrigger: 'onSubmit', required: true},
                                ({getFieldValue}) => ({
                                    validateTrigger: 'onBlur',
                                    validator(rule, value) {
                                        if (!value || getFieldValue('password') !== value) {
                                            return Promise.resolve();
                                        }
                                        return Promise.reject(new Error('新密码不可与旧密码相同'));
                                    },
                                }),
                                () => ({
                                    validateTrigger: 'onSubmit',
                                    validator(rule, value) {
                                        if (!value || Regexps.PASSWORD.test(value)) {
                                            return Promise.resolve();
                                        }
                                        return Promise.reject(new Error('请输入6-12位密码，不可包含空格'));
                                    },
                                }),
                            ]}
                        />
                        <ProFormText.Password
                            width="md"
                            label="确认新密码"
                            name="repeat_new_password"
                            dependencies={['new_password']}
                            placeholder="请再次输入新密码"
                            validateTrigger={['onSubmit', 'onBlur']}
                            rules={[
                                {validateTrigger: 'onSubmit', required: true},
                                ({getFieldValue}) => ({
                                    validateTrigger: 'onBlur',
                                    validator(rule, value) {
                                        if (!value || getFieldValue('new_password') === value) {
                                            return Promise.resolve();
                                        }
                                        return Promise.reject(new Error('两次输入的密码不一致!'));
                                    },
                                }),
                            ]}
                        />
                    </ProForm>
                </div>
                <div className="flex-center">
                    <Button
                        type="primary"
                        key="submit"
                        loading={loading}
                        onClick={() => formRef.current?.submit()}
                    >
                        保存
                    </Button>
                </div>
            </ProCard>
        </PageContainer>
    );
};

export default ChangePwd;
